<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <script src="jquery-3.1.0.min.js"></script>
    <style type="text/css">
        #div1{
            width: 500px;
            height: 200px;
            border: 3px solid blue;
        }
        #div2{
            width: 400px;
            height: 150px;
            margin-top: 10px;
            margin-left: 10px;
            border: 3px solid blue;
        }
        p{
            margin-left: 10px;
            margin-top: 10px;
            width: 150px;
            height: 80px;
            border: 3px solid blue;
        }
    </style>
</head>
<body>
   <div id="div1">div1
       <div id="div2">div2
           <p>p元素
               <a>
                    hello world
               </a>
           </p>
       </div>
   </div>

    <script>
        /*向下遍历的方法：children:只针对儿子辈和find：可以指定任何子孙元素*/
        $(document).ready(function(){
            $("#div1").children().css({border:"3px solid red"})//children是可选元素
//             $("#div1").find("#div2").css({border:"3px solid red"}) //find是必写元素
         })
    </script>
</body>
</html>